import Vue from "vue";
import VueRouter from "vue-router";
import Login from "@/views/login/Login";
import Layout from "@/views/layout/Layout";
import local from "@/utils/local";
Vue.use(VueRouter);

// 它的提示是 避免到当前位置的冗余导航。 简单来说就是重复触发了同一个路由。
const originalPush = VueRouter.prototype.push;

VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch((err) => err);
};

const routes = [
	// 首页
	{
		path: "/",
		component: Layout,
		meta: { title: "后台首页", path: "/", icon: "icon-home" },
		ismenu: true,
		redirect: "/home",
		children: [
			{
				path: "/home",
				component: () => import("@/views/home/Home.vue"),
			},
		],
	},
	// 登录页
	{
		path: "/login",
		component: Login,
		ismenu: false,
	},
];
// 动态路由
const dynamicroute = [
	// 总布局
	// 商品
	{
		path: "/goods",
		component: Layout,
		meta: { title: "商品管理", path: "/goods", icon: "icon-item" },
		ismenu: true,
		redirect: "/goods/goods-list",
		children: [
			{
				path: "/goods/goods-list",
				meta: { title: "商品列表", path: "/goods/goods-list" },

				component: () => import("@/views/goods/GoodsList.vue"),
			},
			{
				path: "/goods/goods-cate",
				meta: { title: "商品分类", path: "/goods/goods-cate" },

				component: () => import("@/views/goods/GoodsCate.vue"),
			},
			{
				path: "/goods/goods-add",
				meta: { title: "商品添加", path: "/goods/goods-add", role: ["super"] },

				component: () => import("@/views/goods/GoodsAdd.vue"),
			},
		],
	},
	// 用户管理
	{
		path: "/account",
		component: Layout,
		redirect: "/account/account-list",
		meta: { title: "账户管理", path: "/account", icon: "icon-account" },
		ismenu: true,
		children: [
			{
				path: "/account/account-add",
				meta: {
					title: "账号添加",
					path: "/account/account-add",
					role: ["super"],
				},

				component: () => import("@/views/account/AccountAdd"),
			},
			{
				path: "/account/account-list",
				meta: {
					title: "账号列表",
					path: "/account/account-list",
					role: ["super"],
				},

				component: () => import("@/views/account/AccountList"),
			},
			{
				path: "/account/password-modify",
				meta: { title: "密码修改", path: "/account/password-modify" },

				component: () => import("@/views/account/PasswordModify"),
			},
			{
				path: "/account/personal",
				meta: { title: "个人中心", path: "/account/personal" },

				component: () => import("@/views/account/Personal"),
			},
		],
	},

	// 订单管理
	{
		path: "/order",
		component: Layout,
		meta: { title: "订单管理", path: "/order", icon: "icon-order" },
		ismenu: true,
		children: [
			{
				path: "",

				component: () => import("@/views/order/Order"),
			},
		],
	},

	// 商铺管理
	{
		path: "/shop",
		component: Layout,
		meta: {
			title: "商店管理",
			path: "/shop",
			role: ["super"],
			icon: "icon-shop",
		},
		ismenu: true,
		children: [
			{
				path: "",
				component: () => import("@/views/shop/MyShop"),
			},
		],
	},

	// 销售统计

	{
		path: "/total",
		component: Layout,
		redirect: "/total/goods-total",
		meta: {
			title: "销售统计",
			path: "/total",
			role: ["super"],
			icon: "icon-total",
		},
		ismenu: true,
		children: [
			{
				path: "/total/goods-total",
				meta: { title: "商品统计", path: "/total/goods-total" },

				component: () => import("@/views/total/GoodsTotal"),
			},
			{
				path: "/total/order-total",
				meta: { title: "订单统计", path: "/total/order-total" },

				component: () => import("@/views/total/OrderTotal"),
			},
		],
	},
];

// 重定向路由  404
const errorroute = [
	// 重定向
	// 重定向需要写在路由最后面  位置
	{
		path: "*",
		redirect: "/error404",
	},
	{
		path: "/error404",
		component: () => import("@/views/error/error404.vue"),
	},
];

// 创建路由实例对象
// 把路由配置传入
const router = new VueRouter({
	routes,
});
// 顺序不能乱 先定义好router  再用router

// 判断是否有权限
const hasPermission = (router, role) => {
	if (router.meta && router.meta.role) {
		return router.meta.role.includes(role);
	} else {
		return true;
	}
};

// 计算出哪些路由是可以访问的
const calcPermissionRoutes = (dynamicroute, role) => {
	console.log("sss", dynamicroute, role);
	// 把有权限的动态路由 计算出来

	let temp = dynamicroute.filter((v) => {
		if (hasPermission(v, role)) {
			if (v.children && v.children.length) {
				v.children = calcPermissionRoutes(v.children, role);
			}
			return true;
		} else {
			return false;
		}
	});

	return temp;
};

// 计算菜单
const calMenus = (routes) => {
	return routes.filter((v) => v.ismenu);
};

// 计算出有权限访问的路由 并且动态添加路由

export const createRouters = () => {
	let role = local.get("role");
	// 如果没有角色 直接return  不走后面 防止报错
	if (!role) return;

	// 调用一个函数  把能够访问的路由计算出来  (需要传入动态路由)
	let accessRourtes = calcPermissionRoutes(dynamicroute, role);
	console.log("scs", accessRourtes);

	// 把计算出来的路由 添加到动态实例中
	router.addRoutes([...routes, ...accessRourtes, ...errorroute]);

	// 计算左侧菜单
	let menus = calMenus([...routes, ...accessRourtes]);
	// 存入本地
	local.set("menus", menus);
};
// 路由中也需要调用一次  防止刷新出问题
// 这样页面刷新也会调用
createRouters();

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
	let isLogin = local.get("t_k") ? true : false;

	// 页面中途 通过网址进入login
	if (from.path != "/" && to.path == "/login") {
		window.location.reload();
	}

	if (isLogin) {
		next();
	} else {
		//  next({path:'/login'}) 这样写死循环光这个的话死循环
		// 没有放行
		// 所以不能直接那样写  需要判断是否去登录页 然后确定放行不放行
		if (to.path === "login") {
			next();
		} else {
			next();
		}
	}
});
export default router;
